<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">客户管理</h1>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="line-height: 36px;">筛选区</span>
                        <div style="float: right">
                            <el-button type="primary" @click.native.prevent="getList">查询</el-button>
                            <el-button type="primary" @click.native.prevent="clearSearch">清空查询条件</el-button>
                        </div>
                    </div>
                    <el-form ref="search" :model="search" label-width="80px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="名称搜索">
                                    <el-input v-model="search.filterName" placeholder="昵称/手机号" style="width: 217px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="是否会员">
                                    <el-radio-group v-model="search.isVip" style="margin-top: 8px">
                                        <el-radio label="">全部</el-radio>
                                        <el-radio :label="1">是</el-radio>
                                        <el-radio :label="0">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="性别">
                                    <el-select v-model="search.sex" placeholder="请选择性别">
                                        <el-option
                                                v-for="item in sexList"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="状态">
                                    <el-select v-model="search.enable" placeholder="请选择状态">
                                        <el-option
                                                v-for="item in stateList"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="注册时间">
                                    <el-date-picker
                                            v-model="search.from"
                                            type="date"
                                            placeholder="选择日期">
                                    </el-date-picker>&nbsp;至&nbsp;
                                    <el-date-picker
                                            v-model="search.to"
                                            type="date"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="客户类型">
                                    <el-select v-model="search.type" placeholder="请选择客户类型">
                                        <el-option
                                                v-for="item in typeList"
                                                :label="item.name"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
                <div style="margin-top: 10px">
                    <el-button type="primary" @click.native.prevent="exportCustomer">导出</el-button>
                </div>
                <el-card class="box-card" style="margin-top: 10px">
                    <el-table
                            :data="customerList"
                            border
                            style="width: 100%">
                        <el-table-column
                                inline-template
                                label="序号"
                                width="80">
                            <div>{{ $index+search.pageSize*(search.currentPage-1)+1 }}</div>
                        </el-table-column>
                        <el-table-column
                                prop="nick"
                                width="180"
                                show-overflow-tooltip
                                label="昵称">
                        </el-table-column>
                        <el-table-column
                                prop="tel"
                                width="150"
                                align="center"
                                label="手机号码">
                        </el-table-column>
                        <el-table-column
                                prop="typeName"
                                width="100"
                                align="center"
                                label="客户类型">
                        </el-table-column>
                        <el-table-column
                                prop="enable"
                                align="center"
                                :formatter="formatterEnable"
                                label="状态">
                        </el-table-column>
                        <el-table-column
                                prop="sex"
                                align="center"
                                :formatter="formatterSex"
                                label="性别">
                        </el-table-column>
                        <el-table-column
                                prop="insertTime"
                                align="center"
                                width="130"
                                :formatter="formatterInsertTime"
                                label="注册时间">
                        </el-table-column>
                        <el-table-column
                                prop="lastLoginTime"
                                align="center"
                                width="160"
                                :formatter="formatterTime"
                                label="最后登录时间">
                        </el-table-column>
                        <el-table-column
                                prop="balance"
                                show-overflow-tooltip
                                label="余额">
                        </el-table-column>
                        <el-table-column
                                prop="dealAmount"
                                width="140"
                                label="总销售额(元)">
                        </el-table-column>
                        <el-table-column
                                prop="point"
                                label="积分">
                        </el-table-column>
                        <el-table-column
                                prop="vip"
                                align="center"
                                width="120"
                                :formatter="formatterVip"
                                label="是否会员">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                inline-template>
                            <div style="margin-left: -10px">
                                <el-dropdown>
                                    <el-button size="small" type="primary">
                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown" align="center">
                                        <el-dropdown-item v-if="isPermission('customer:view', user.permissions)"><el-button size="mini" type="primary" @click.native.prevent="detail(row.id)">详情</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('customer:delete', user.permissions)"><el-button size="mini" type="primary" @click.native.prevent="deleteCustomer(row.id)">删除</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('customer:enable', user.permissions)">
                                            <el-button size="mini" type="primary" v-if="row.enable === 0" @click.native.prevent="enable(row, 1)">启用</el-button>
                                            <el-button size="mini" type="primary" v-else @click.native.prevent="enable(row, 0)">禁用</el-button>
                                        </el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('customer:qrCode', user.permissions)"><el-button size="mini" type="primary" @click.native.prevent="getQr(row.id)">生成二维码</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('customer:uType', user.permissions)"><el-button size="mini" type="primary" @click.native.prevent="setType(row)">会员类型</el-button></el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handleCurrentPageChange"
                            :current-page="search.currentPage"
                            :page-size="search.pageSize"
                            layout="total, prev, pager, next"
                            :total="totalCount">
                    </el-pagination>
                </el-card>

                <el-dialog title="编辑会员类型" size="tiny" v-model="setTypeDialog">
                    <el-form :model="typeForm" label-width="80px">
                        <el-form-item label="会员类型">
                            <el-select v-model="typeForm.type" placeholder="请选择会员类型">
                                <el-option
                                        v-for="item in typeList"
                                        :label="item.name"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="setTypeDialog = false">取 消</el-button>
                        <el-button type="primary" @click="saveType">确 定</el-button>
                    </div>
                </el-dialog>

            </div>s
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                user: ${(user)!'null'},
                headerNavList: list.headerNavList,
                sexList: [
                    {
                        label: '未知',
                        value: 0
                    },
                    {
                        label: '男',
                        value: 1
                    },
                    {
                        label: '女',
                        value: 2
                    }
                ],
                stateList: [
                    {
                        label: '启用',
                        value: 1
                    },
                    {
                        label: '禁用',
                        value: 0
                    }
                ],
                accountNavList: list.accountNavList,
                leftMenuList: list.menu,
                search: {
                    filterName: '',
                    sex: '',
                    isVip: "",
                    enable: '',
                    from: '',
                    to: '',
                    currentPage: list.currentPage,
                    pageSize: list.pageSize,
                    isAll: 1,
                    type: ''
                },
                customerList: [],
                totalCount: 0,
                setTypeDialog: false,
                typeForm: {
                    id: '',
                    type: ''
                },
                typeList: []
            }
        },
        mounted: function () {
            this.getTypeList();
            this.getList();
        },
        methods: {
            handleCurrentPageChange(val) {
                this.search.currentPage = val
                this.getList();
            },
            forwardAdd () {
                window.location.href = '/org/add'
            },
            detail (id) {
                window.open('/customer/detail?id=' + id);
            },
            exportCustomer () {
                window.open("/customer/outPut?filterName=" + this.search.filterName
                        + "&sex=" + this.search.sex + "&isVip=" + this.search.isVip + "&enable="
                        + this.search.enable + "&from=" + this.formatTime(this.search.from, true) + "&to=" + this.formatTime(this.search.to, false));
            },
            getTypeList () {
                let that = this;
                this.$get("/dictionary/list/MS_CUSTOMER_TYPE", {}, function (res) {
                    if (res.status === 100) {
                        that.typeList = res.returnValue;
                    } else {
                        that.$alert(res.errMsg,'提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    that.$alert(res.errMsg,'提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            getQr (id) {
                window.open("/qr/gen?uid=" + id);
            },
            setType (row) {
                this.typeForm = {
                    id: row.id,
                    type: row.type !== undefined ? (row.type + ""): ''
                }
                this.setTypeDialog = true;
            },
            saveType () {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/customer/updateCustomerParam", this.typeForm, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.getList();
                        that.setTypeDialog = false;
                        that.$alert('编辑类型成功', '提示', {
                            confirmButtonText: '确定',
                        });
                    } else {
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert(res.errMsg, '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            deleteCustomer (id) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/customer/delete", {customerId: id}, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.getList();
                        that.$alert('删除成功', '提示', {
                            confirmButtonText: '确定',
                        });
                    } else {
                        loading.close();
                        that.$alert('删除失败', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('删除失败', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            enable (row, state) {
                let that = this;
                let obj = {
                    customerId: row.id,
                    state: state
                }
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/customer/updatEnable", obj, function (res) {
                    if (res.status === 200) {
                        row.enable = state;
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            formatterEnable (row, column) {
                let enable = row.enable;
                if (enable === 0) {
                    return '禁用';
                } else {
                    return '启用';
                }
            },
            formatterTime (row, column) {
                if (row.lastLoginTime !== undefined && (row.lastLoginTime + "").length >= 10) {
                    return (row.lastLoginTime + "").substring(0, 10);
                } else {
                    return row.lastLoginTime;
                }
            },
            formatterInsertTime (row, column) {
                if (row.insertTime !== undefined && (row.insertTime + "").length >= 10) {
                    return (row.insertTime + "").substring(0, 10);
                } else {
                    return row.insertTime;
                }
            },
            formatterSex (row, column) {
                let sex = row.sex;
                if (sex === 0) {
                    return '未知';
                } else if (sex === 1) {
                    return '男';
                } else {
                    return '女';
                }
            },
            formatterVip (row, column) {
                let vip = row.vip;
                if (vip === 0) {
                    return "否";
                } else {
                    return "是";
                }
            },
            getList () {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                if (this.search.from !== "") {
                    this.search.from = this.formatTime(this.search.from, true);
                }
                if (this.search.to !== "") {
                    this.search.to = this.formatTime(this.search.to, true);
                }
                this.http("/customer/customerList", this.search, function (res) {
                    if (res.status === 200) {
                        that.customerList = res.data.customerList;
                        that.totalCount = res.data.total;
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误', '提示', {
                        confirmButtonText: '确定',
                    });
                })
            },
            clearSearch () {
                this.search = {
                    filterName: '',
                    sex: '',
                    isVip: '',
                    enable: '',
                    from: '',
                    to: '',
                    currentPage: list.currentPage,
                    pageSize: list.pageSize,
                    isAll: 1,
                    type: ''
                }
                this.getList();
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>